<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
	<title>Trilolo</title>
    <link rel="shortcut icon" href="/static/uploads/favicon.ico" />
    <meta property="og:title" content="Trilolo" />
    <meta property="og:type" content="music.playlist" />
	<meta property="fb:admins" content="650806537" />
	<meta property="fb:app_id" content="158218584351709" />
    <meta property="og:url" content="http://www.trilolo.com/" />	
    <meta property="og:image" content=
	"static/uploads/skip.jpg" />
    <meta property="og:site_name" content="Trilolo" />
    <meta property="og:description" content="Trilolo ~ Radio 3la kefk" />
    <link rel="stylesheet" href=
    "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/black-tie/jquery-ui.css"
    type="text/css" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <meta charset="utf-8" />
	
	<div id="fb-root"></div>


<div  style="text-align:center;position:absolute;margin-top: -100px;margin-left: -100px; visibility:hidden;">
      <div id="player">
        Loading the player ...
      </div>
    </div>

<script type="text/javascript" src=
    "/static/jwplayer/jwplayer.js">
</script>

<script language="JavaScript">
			if (document.images) {
				img2 = new Image();
				img3 = new Image();

				img2.src = "/static/uploads/skip_hoverd.jpg";
				img3.src = "/static/uploads/mute_hoverd.png";
			}		
		var tracks=[];
		var current_track=new Object();
		
		{% for item in list %}
		var current_track=new Object();
		current_track['id']="{{item.id}}";
		current_track['play_url']="{{ item.play_url}}";
		tracks.push(current_track)
		{% endfor %}
var current_track=tracks.pop()

  window.onbeforeunload = confirmExit;
  function confirmExit()
  {
    var currentPosition = jwplayer().getPosition();
		xmlhttp=new XMLHttpRequest();
		xmlhttp.open("GET","/log_track?track="+current_track['id']+"&action=close&pos="+currentPosition,true);
		xmlhttp.send();

for (var i=0;i<1000;i++){
      // do something unnoticable but time consuming like writing a lot to console
      console.log('buying some time to finish saving data'); 
    };

  }
</script>

<script type="text/javascript">

                        jwplayer("player").setup({ 
                        flashplayer: "/static/jwplayer/player.swf", 
                        file: current_track['play_url'], 
                        height: 24, 
                        width: 300,
                        'autostart': 'true',
                        controlbar: "bottom"
                        
                }); 
                jwplayer().setVolume(100);
                jwplayer().onComplete( function(event){
    sendMessage();
        _gaq.push(['_trackEvent', 'Radio', 'TrackEnd']);
    });

    jwplayer().onBuffer( function(event){
    document.getElementById('buffering-hint').style.visibility = "visible";
        

    });

    jwplayer().onPlay( function(event){
    document.getElementById('buffering-hint').style.visibility = "hidden"; 
		
    });

	    jwplayer().onVolume( function(event){
		
      

    });

jwplayer().onError( function(event){
		sendMessage();
      

    });

	jwplayer().onTime(function(event) {

	if (event.position >=1 & event.position <=5 & loading_fired==false){
		loadtracks();
	}
});


    </script>


<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=158218584351709";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<script type="text/javascript" src="/static/uploads/highslide/highslide-with-html.js"></script>
<link rel="stylesheet" type="text/css" href="/static/uploads/highslide/highslide.css" />
<script type="text/javascript">
    hs.graphicsDir = '/static/uploads/highslide/graphics/';
    hs.outlineType = 'rounded-white';
</script>
<script>
function setCookie(c_name,value,exdays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
}
setCookie("session","{{session_key}}",356)
</script>
    <style type="text/css">
/*<![CDATA[*/
    .centeredImage
    {
    text-align:center;
    display:block;

    }

    /*]]>*/
	
		footer {
		width:100%;
		height:50px;
		position:absolute;
		bottom:0;
		}

container
{
    height:400px;
    width:400px;
    position:relative;
}
text
{
    z-index:100;
    position:absolute;    
    color:white;
    font-size:24px;
    font-weight:bold;
    left:150px;
    top:350px;
}

    </style>
    <title></title>

<link rel="stylesheet" href="/static/includes/messi.min.css" />
<script src="/static/includes/messi.min.js"></script>
<script type="text/javascript" src="/static/sdk/MB_SDK_Web.js"></script>
<script type="text/javascript">
function requestAdHandler() {
// create configuration object
var configurationObject = {
"adLength" : MB_AD_PERIOD.SHORT


};
var userInfo = new Object(); // or just {}
userInfo[MB_TARGETS.LANGUAGE] = MB_LANGUAGES.Arabic;
setUserInformation(userInfo);


// request Ad
requestAd(configurationObject);
}
</script>




  </head>
  <body>

<body onload="mbServiceInit('004-oZi02DQhsA_Rx5AoPLJvweLXVz4l6Ux');">
<!--<a href="javascript:requestAdHandler()">Get Ad</a>-->

<script> 

var msg1=false;
var msg2=false;
</script>
<script>
//{%if first_run %}
//new Messi('راديو تريلولو بيتعلم الاغاني الي بتحبها ويجبلك اغاني زيها', {title: 'الراديو ', modal: //true ,center: false, viewport: {top: '50%', left: '50%'}});
//{% endif %}
</script>


<table width="100%" ">
<td align="left" >{% if user_id %}
  Welcome {{user_id}}
{% else %}
<a href="/login">سجل بالفيسبوك هنجبلك اغاني احلي</a>
{% endif %}</td>
<td align ="right"><a   href="/">الراديو</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a   href="/?s=agmad7">اجمد سبعه</a>	</td>

</table>





  
  <div id="fb-root"></div>



<script>
  window.fbAsyncInit = function() {
  FB.init({
    appId      : '158218584351709', // App ID
    channelUrl : '/static/uploads/channel.html', // Channel File
    status     : true, // check login status
    cookie     : true, // enable cookies to allow the server to access the session
    xfbml      : true  // parse XFBML
  });

  // Here we subscribe to the auth.authResponseChange JavaScript event. This event is fired
  // for any authentication related change, such as login, logout or session refresh. This means that
  // whenever someone who was previously logged out tries to log in again, the correct case below 
  // will be handled. 
  FB.Event.subscribe('auth.authResponseChange', function(response) {
    // Here we specify what we do with the response anytime this event occurs. 
    if (response.status === 'connected') {

    } else if (response.status === 'not_authorized') {

    } else {

    }
  });
  };

  // Load the SDK asynchronously
  (function(d){
   var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
   if (d.getElementById(id)) {return;}
   js = d.createElement('script'); js.id = id; js.async = true;
   js.src = "//connect.facebook.net/en_US/all.js";
   ref.parentNode.insertBefore(js, ref);
  }(document));

</script>

    <script type="text/javascript" src=
    "http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">
</script><script src=
'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js'
    type="text/javascript">
</script>

    <div style="display: none;">
      {{ token}}
    </div><script type="text/javascript">
//<![CDATA[

    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-15193580-1']);
    _gaq.push(['_trackPageview']);

    (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();

    //]]>
    </script><script type="text/javascript" src=
    "/_ah/channel/jsapi">
</script><script type="text/javascript">
//<![CDATA[

        
    


    //]]>
    </script><script type="text/javascript">
//<![CDATA[

var loading_fired=false;
function loadtracks()
	{
		if (tracks.length==0)
		{
		console.log("zero tracks");
			tracks=[];
		xmlhttp=new XMLHttpRequest();
		console.log("will load tracks");
		xmlhttp.open("GET","/get_track",true);
		xmlhttp.send();
		loading_fired=true;
		xmlhttp.onreadystatechange = function () {
    if (xmlhttp.readyState === 4) {
        // XHR state is DONE
        if (xmlhttp.status == 200) {
		console.log("got response");
            var m=JSON.parse(xmlhttp.responseText);
		if (m.length >0)
		{
			loading_fired=false;
		}
		console.log("tracks length "+m.length);
		for (var i =0 ; i<m.length ; i++)
		{
			tracks.push(m[i]);
		}
	console.log("tracks length after pushin "+tracks.length);
		}
        }
    }
};
		

		
	}





function mbFinishedWithStatus(status) {
console.log("finished");
jwplayer("player").play();
}


var ended_tracks=0;

    function skipTrack()
	{
	
	


{%if first_run %}
if (msg1==false)
{
new Messi('<font size="5">استخدم الزرار ده لو الاغنيه مش عاجباك وعايز تجيب الي بعدها</font> ', {title: 'الراديو ', modal: true , buttons: [{id: 0, label: '<font size="5">ماشي</font>', val: 'X'}]});
msg1=true;
}
{% endif %}


		var currentPosition = jwplayer().getPosition();
		xmlhttp=new XMLHttpRequest();
		xmlhttp.open("GET","/log_track?track="+current_track['id']+"&action=skip&pos="+currentPosition,true);
		xmlhttp.send();

		var current=tracks.pop();
		if (current!=null)
		{
		current_track=current;
                jwplayer("player").load(current['play_url']) 
		}
		
		

		//location.reload();
	}

    function sendMessage()
	{
		
		
		ended_tracks=ended_tracks+1;
		console.log("ended"+ended_tracks);
		xmlhttp=new XMLHttpRequest();
		xmlhttp.open("GET","/log_track?track="+current_track['id']+"&action=end",true);
		xmlhttp.send();


		var current=tracks.pop();
		if (current!=null)
		{
		current_track=current;
                jwplayer("player").load(current['play_url']) 
		}
	if (ended_tracks==2)
		{
			console.log("will request ad");
			requestAdHandler();
			jwplayer("player").pause()
			ended_tracks=-1;
		}
		//location.reload();
	}
    function bigImg(x)
    {

    x.src="/static/uploads/skip_hoverd.jpg";
    }

    function normalImg(x)
    {
	x.src='/static/uploads/skip.jpg'
    }
    function fetch(x)
    {
    x.width="298"
    x.height="298"
    skipTrack();
    x.src="/static/uploads/skip_hoverd.jpg";
    document.getElementById('buffering-hint').style.visibility = "visible";

    _gaq.push(['_trackEvent', 'Radio', 'Skip']);
    }

    function mouseup(x)
    {
    x.width="300"
    x.height="300"
    x.src="/static/uploads/skip.jpg";
    }

	
	    function bigImgmute(x)
    {

    x.src="/static/uploads/mute_hoverd.png";
    }

    function normalImgmute(x)
    {
    x.src="/static/uploads/mute.png";
    }
    function fetchmute(x)
    {
{%if first_run %}
if (msg2==false)
{
	new Messi('<font size="5">استخدم الزرار ده لو عايز تقفل الصوت , بس خلي بالك الراديو هيفضل شغال</font> ', {title: 'الراديو ', modal: true, buttons: [{id: 0, label: '<font size="5">ماشي</font>', val: 'X'}]});
msg2=true;
}
{% endif %}

    x.width="298"
    x.height="298"
    x.src="/static/uploads/mute_hoverd.png";
	jwplayer("player").setMute()
	if (jwplayer("player").getMute()==true)
	{
	document.getElementById('mute-hint').style.visibility = "visible";
	}
	else
	{
	document.getElementById('mute-hint').style.visibility = "hidden";
	}
	
    _gaq.push(['_trackEvent', 'Radio', 'Mute']);
    }

    function mouseupmute(x)
    {
    x.width="300"
    x.height="300"
    x.src="/static/uploads/mute.jpg";
    }
    //]]>
    </script>
    <div id="fb-root"></div><script type="text/javascript">
//<![CDATA[
    (function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=546239978727129";
    fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
    //]]>



    </script>

    <div class="fb-like"  data-href="http://www.trilolo.com" data-send="false" data-width="450"
    data-show-faces="false"></div>
	
    <div id="buffering-hint" style=
    "text-align:center; ">
      <div style=
      "background:#666; color:#eee; border-radius: 5px; border: 2px solid #aaa; padding:1px 8px; display:inline-block;font-size:1.1em">
<img src="/static/uploads/loading_transparent.gif" alt="ELRADIO" />
     ... تحميل
      </div>
    </div>
	<div id="mute-hint" style=
    "text-align:center; visibility:hidden;">
      <div style=
      "background:#666; color:#eee; border-radius: 5px; border: 2px solid #aaa; padding:1px 8px; display:inline-block;font-size:1.1em">
      الصوت مقفول
      </div>
    </div>
    <div class="centeredImage" >
      <img onmouseup="mouseup(this)" onclick="fetch(this)"
      onmousemove="bigImg(this)" onmouseout="normalImg(this)" src=
      "/static/uploads/skip.jpg" alt="ELRADIO" width="300" height=
      "300" />
	  <img onmouseup="mouseupmute(this)" onclick="fetchmute(this)"
      onmousemove="bigImgmute(this)" onmouseout="normalImgmute(this)" src=
      "/static/uploads/mute.png" alt="ELRADIO" width="300" height=
      "300" />
    </div>
	 


<center><div id="lga" style="height:131px;"><div ><div title="Google Images" align="left"   style="background:url(/static/uploads/radio.png) no-repeat;background-size:550px 150px;height:150px;width:550px"><div nowrap="" style="color:#1370E5;font-size:25px;font-weight:bold;position:relative;right:25px;float:right;top:5px"><span>{{show_name}}</span></div></div></div></div><div style="height:5px"></div><div id="prm-pt" ></div></center>

	

<div class="centeredImage">
	<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- trilolo-home -->
<ins class="adsbygoogle"
     style="display:inline-block;width:468px;height:60px"
     data-ad-client="ca-pub-1245238540641034"
     data-ad-slot="1637041085"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>

    





	
<div>

<!--
	3) The contentId option points to the id of the div below. Remember to change it in both
	places if you have multiple popups!
-->
<footer>
<hr style="opacity: 0.1;">
<a href="#"  onclick="_gaq.push(['_trackEvent', 'Radio', 'FeedbackClick']);return hs.htmlExpand(this, { contentId: 'highslide-html' , width: 480, height: 500 } )" class="highslide">
	<font size="4" style="opacity: 0.6;" color="Black">سيب رأيك</font>
</a>

<div class="highslide-html-content" id="highslide-html">
	<div class="highslide-header">
		<ul>
			<li class="highslide-move">
				<a href="#" onclick="return false">Move</a>
			</li>
			<li class="highslide-close">
				<a href="#" onclick="return hs.close(this)">Close</a>
			</li>
		</ul>
	</div>
	<div class="highslide-body">

	<div class="fb-comments" data-href="http://trilolo.com" data-width="470" data-num-posts="10"></div>
	</div>
    <div class="highslide-footer">
        <div>
            <span class="highslide-resize" title="Resize">
                <span></span>
            </span>
        </div>
    </div>
</div>
</footer>
</div>
  </body>
</html>
